<template>
    <div class="content">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="所属栏目">
                <el-select v-model="form.classify_name" placeholder="请选择">
                    <el-option-group
                    v-for="group in columnOptions"
                    :key="group.label"
                    :label="group.label">
                    <el-option
                        v-for="item in group.options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="置顶视频/图片">
                    <audioPicUpload ref="audiopicupload" v-model="topContent" v-if="topContentShow"></audioPicUpload>
                </el-form-item>
            
            <el-form-item label="发布时间">
                <el-date-picker type="datetime" placeholder="选择日期" v-model="form.issuing_time" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="排序">
                <el-input type="number" v-model="form.sort"></el-input>
            </el-form-item>
            <el-form-item label="活动形式">
                <vue-ueditor-wrap v-model="form.content" :config="myConfig"></vue-ueditor-wrap>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button @click="addPaper">取消</el-button>
            </el-form-item>
    </el-form>
    </div>
</template>
<script>
import audioPicUpload from '@/components/audioPicUpload'
export default {
    data() {
        return {
            columnOptions: [],
            column: '',
            topContentShow:true,
            topContent:{
              src:'',
              srcId:'',
              type:'',//文件类型video,img

              video_post_id:'',//视频封面图片id
              video_post_src:''//视频封面图片
            },
            form:{
              type: 'image'
            },
            myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 500,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                serverUrl: 'http://35.201.165.105:8000/controller.php',
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                UEDITOR_HOME_URL: '/static/UEditor/'
                }
        }
    },
    mounted() {
      if (this.$route.query.id){
        this.getContentArticleDetail(this.$route.query.id);
      }
      this.columnOptions = this.$route.query.columnOptions;
      // this.$refs.audioPicUpload.uploadType = 'img';
    },
    components:{
        audioPicUpload
    },
    methods: {
      //获取文章详情
      async getContentArticleDetail(id){
        let params = {
          id: id
        }
        const res = await this.$api.getContentArticleDetail(params);
        if (res.data.level == 'success'){
          console.log(res.data)
          this.form = res.data.data;
          if (this.form.Top_type == 'image'){
            this.topContent.type = 'img';
            this.topContent.srcId = this.form.img_list[0].img_id;
            this.topContent.src = this.form.img_list[0].img_url;
          }else {
            this.topContent.type = 'video';
            this.$refs.audioPicUpload.uploadType = 'video';
            this.topContent.video_post_id = this.form.video_id;
            this.topContent.video_post_src = this.form.video_url;
          }
          this.form.issuing_time = this.form.created_at;
        }else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      },
      //设置文章
      async setContentArticle(){
        let params = this.form;
        const res = await this.$api.setContentArticle(params);
        if (res.data.level == 'success'){
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.$router.push({path:'/paper'})
        } else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          })
        }
      },
      onSubmit(){
        if (this.topContent.type == 'img'){
          this.form.img_ids = [];
          this.form.img_ids.push(this.topContent.srcId);
        } else {
          this.form.video_id = this.topContent.video_post_id;
        }
        this.setContentArticle();
      },
      addPaper(){
        this.$router.push({path:'/paper'})
      }
    },

}
</script>
